<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">上传组件</view>
		</w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '20rpx 0' }">
			<w-upload v-model="fileList1" :fileCount="1" action="http://localhost:3000/api/upload" @uploadSuccess="uploadSuccess">
			</w-upload>
		</pageDemoBlock>
		<pageDemoBlock title="多文件上传" color="#1c87e4" :contentStyle="{ padding: '20rpx 0' }">
			<w-upload  v-model="fileList2" action="http://localhost:3000/api/upload" @uploadSuccess="uploadSuccess">
			</w-upload>
		</pageDemoBlock>
	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				fileList1: [],
				fileList2: [{
						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.90dapei.com%2Fzb_users%2Fupload%2F2020%2F03%2F20200317124425158442026590166.jpeg&refer=http%3A%2F%2Fwww.90dapei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622106972&t=b70402a874a33318f8a028d38e81e3a0'
					},
					{
						url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3949990884,239318934&fm=26&gp=0.jpg'
					}
				]
			};
		},
		methods: {
			uploadSuccess(index, res) {
				if (res.code == 200) {
					this.fileList1[index].url = res.data.url;
				}
			}
		}
	};
</script>

<style lang="scss" scoped></style>
